<template>
  <div class="box loginBox">
    <van-nav-bar
      :title="'登录'+$route.query.to"
      right-text="去注册"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/register?to='+$route.query.to)"
    />
    <van-tabs v-model="active">
      <van-tab title="用户名登录">
        <van-form @submit="onSubmit1">
          <van-field
            v-model="username"
            name="username"
            placeholder="用户名"
            :right-icon="unReg"
          />
          <van-field
            v-model="password1"
            name="password"
            placeholder="密码"
            :right-icon="pwReg1"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" :disabled="isOk1">登录</van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="手机号登录">
        <van-form @submit="onSubmit2">
          <van-field
            v-model="tel"
            name="tel"
            placeholder="手机号"
            :right-icon="telReg"
          />
          <van-field
            v-model="password2"
            name="password"
            placeholder="密码"
            :right-icon="pwReg2"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" :disabled="isOk2">登录</van-button>
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Tab, Tabs, Form, Field, Button, Toast } from 'vant'
import { login } from '@/request/index.js'
import { mapMutations } from 'vuex'

Vue.use(NavBar)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)

export default {
  data () {
    return {
      active: 0,
      username: '',
      password1: '',
      password2: '',
      tel: ''
    }
  },
  methods: {
    ...mapMutations({
      change_isLogin: 'login/change_isLogin',
      change_token: 'login/change_token',
      change_test: 'login/change_test'
    }),
    onSubmit1 (val) {
      const that = this
      login(val).then(data => {
        if (data.data.code === 1) {
          // 需要在前端存储登录状态
          // token
          // data.data.token
          localStorage.setItem('token', data.data.token)
          localStorage.setItem('isLogin', 'ok')
          // 修改状态管理器中的状态
          // console.log(this.$store)
          // this.$store.commit('login/change_isLogin', 'ok')
          // this.$store.commit('login/change_token', data.data.token)
          // this.$store.commit('login/change_test', 'hahah')
          this.change_isLogin('ok')
          this.change_token(data.data.token)
          this.change_test('hahaha')
          Toast({
            message: data.data.title,
            onClose () {
              that.$router.replace(that.$route.query.to)
            }
          })
        } else if (data.data.code === 0) {
          Toast({
            message: data.data.title,
            onClose () {
              that.$router.push('/register')
            }
          })
        } else {
          Toast(data.data.title)
        }
      })
    },
    onSubmit2 () {}
  },
  computed: {
    unReg () {
      return this.username.length > 0 ? 'success' : 'cross'
    },
    pwReg1 () {
      return this.password1.length > 0 ? 'success' : 'cross'
    },
    pwReg2 () {
      return this.password2.length > 0 ? 'success' : 'cross'
    },
    telReg () {
      return this.tel.length > 0 ? 'success' : 'cross'
    },
    isOk1 () {
      return this.unReg !== 'success' || this.pwReg1 !== 'success'
    },
    isOk2 () {
      return this.telReg !== 'success' || this.pwReg2 !== 'success'
    }
  }
}
</script>

<style>
</style>
